<template>
  <n-card title="作业列表" hoverable>
		<n-space>
			<n-button type="primary" @click="add">添加作业</n-button>
		</n-space>
		<n-list hoverable bordered>
			<template #header>
				<n-text type="primary">共{{ tableData.totalRow }}项作业</n-text>
			</template>
			
			<n-list-item v-for="work in tableData.records" :key="work.id">
				<n-thing :title="work.name">
					<template #description>
						<n-space vertical>
							<n-text depth="3">关键词：{{ work.keywords }} </n-text>
							<n-text depth="3">创建时间：{{ work.createDate }} {{work.createTime}}</n-text>
							<n-tag :type="work.active ? 'success' : 'error'">
								{{ work.active ? '进行中' : '已完结' }}
							</n-tag>
						</n-space>
					</template>
				</n-thing>
				<n-button type="info" @click="workInfo(work.id)">作业详情</n-button>
				  <!-- <n-upload
				    action="http://127.0.0.1:8888/upload"
				  	accept="audio/mp3, video/mp4"
				  	:show-file-list="false"
				  	@finish="handleFinish">
				    <n-button type="info">上传</n-button>
				  </n-upload> -->
			</n-list-item>

			<template #footer>
				<n-empty v-if="!tableData.records || tableData.records.length === 0" description="暂无作业">
					<template #extra>
						<n-text depth="3">请等待老师发布作业</n-text>
					</template>
				</n-empty>
			</template>
		</n-list>
		<WyDialog v-model:show="editDialog.show" :title="editDialog.title">
			<WyEdit :grade-id="props.gradeId"  @getTableData="getTableData" v-model:show="editDialog.show"  />
		</WyDialog>
	</n-card>
</template>

<script setup>
import { list } from '@/api/homeworkApi'
import WyDialog from '@/components/dialog'
import WyEdit from './edit'
import { useRouter } from 'vue-router'
import { useParamsStore } from '@/stores'
const paramsStore = useParamsStore()
const router = useRouter()
const editDialog = reactive({
	show: false,
	title: '作业'
})
const props = defineProps({
	gradeId: {
		type: Number,
		default: null
	}
})
const params = reactive({
	pageNo: 1,
	pageSize: 10,
	name: '',
	active: null
})
const tableData = ref([])
function getTableData () {
	list(params, content => {
		tableData.value = content
	})
}
function add () {
	editDialog.show = true
}
function workInfo (id) {
	paramsStore.setParams({ workId: id })
	router.push({
		path: '/student/work/info'
	})
}
function handleFinish ({file,event}) {
	const url = URL.createObjectURL(file.file);
	const audioElement = new Audio(url);
	let duration = 0;
	audioElement.addEventListener("loadedmetadata", function(_event) {
		duration = Math.floor(audioElement.duration);
		console.log('文件总时长', duration);
	});
	const data = JSON.parse(event.target.responseText)
	console.log('有效时长', Math.floor(data.time))
	console.log('识别内容', data.content)
}

if (process.client) {
	getTableData()
}

</script>

<style scoped lang="scss">
.n-card {
  margin: 16px;
  border-radius: 8px;
}

.n-list {
  margin-top: 12px;
}
.n-list-item {
	::v-deep(.n-list-item__main) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.n-thing {
			flex: 1;
		}
		.n-upload {
			flex: 1;
			text-align: right;
		}
	}
}
</style>